<template>
	<view class="loginLayout">
		<view class="bg">
			<view class="sun">
				<view class="smile"></view>
				<view class="eye-left"></view>
				<view class="eye-right"></view>
			</view>
			<view class="left-egg">
				<view class="smile"></view>
				<view class="eye-left"></view>
				<view class="eye-right"></view>
			</view>
			<view class="right-egg">
				<view class="smile"></view>
				<view class="eye-left"></view>
				<view class="eye-right"></view>
			</view>
		</view>
		<view class="box">
			<view class="title">
				<text>嗨~ 你来啦~</text>
				<view class="bottom-line"></view>
			</view>
			<view class="form">
				<input class="account" maxlength="30"
					placeholder-class="font-size: 28rpx;top: 32rpx;left: 0rpx;height: 33rpx;line-height: 33rpx;"
					placeholder="输入账号" />
				<input class="password" password type="text" maxlength="30"
					placeholder-style="font-size: 28rpx;top: 32rpx;left: 0rpx;height: 33rpx;line-height: 33rpx;"
					placeholder="请输入密码" />
				<button class="login">登录</button>
			</view>
			<view class="term">
				<checkbox />
				<view class="text">已阅读并同意
					<text>《服务条款》</text>
					和
					<text>《隐私权政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss" scoped>
	.loginLayout {
		position: relative;
		width: 750rpx;
		height: 100vh;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(91, 84, 228, 1);
			z-index: 0;

			.sun {
				position: absolute;
				bottom: 1082rpx;
				left: 0;
				width: 372rpx;
				height: 372rpx;
				background: url('@/static/images/login/sun.png') no-repeat;
				background-size: 100% 100%;

				.smile {
					position: absolute;
					left: 175rpx;
					top: 180rpx;
					width: 20rpx;
					height: 16rpx;
					background: url('@/static/images/login/mouth3.png') no-repeat;
					background-size: 100% 100%;
				}

				[class^="eye-"] {
					position: absolute;
					width: 18rpx;
					height: 18rpx;
					background: #000;
					border-radius: 50%;
				}

				.eye-left {
					top: 155rpx;
					left: 156rpx;
				}

				.eye-right {
					top: 180rpx;
					left: 205rpx;
				}
			}

			.left-egg {
				position: absolute;
				bottom: 429rpx;
				left: -224rpx;
				width: 608rpx;
				height: 641rpx;
				background: url('@/static/images/login/left-egg.png') no-repeat;
				background-size: 100% 100%;

				.smile {
					position: absolute;
					width: 64rpx;
					height: 51rpx;
					left: 307rpx;
					top: 234rpx;
					background: url('@/static/images/login/mouth2.png') no-repeat;
					background-size: 100% 100%;
				}

				[class^="eye-"] {
					position: absolute;
					width: 34rpx;
					height: 34rpx;
					background: #000;
					border-radius: 50%;
				}

				.eye-left {
					top: 192rpx;
					left: 290rpx;
				}

				.eye-right {
					top: 240rpx;
					left: 380rpx;
				}
			}

			.right-egg {
				position: absolute;
				right: -392rpx;
				bottom: 546rpx;
				width: 886rpx;
				height: 933rpx;
				background: url('@/static/images/login/right-egg.png') no-repeat;
				background-size: 100% 100%;

				.smile {
					position: absolute;
					left: 386rpx;
					top: 381rpx;
					width: 39rpx;
					height: 30rpx;
					background: url('@/static/images/login/mouth1.png') no-repeat;
					background-size: 100% 100%;
				}

				[class^="eye-"] {
					position: absolute;
					width: 34rpx;
					height: 34rpx;
					background: #000;
					border-radius: 50%;
				}

				.eye-left {
					top: 375rpx;
					left: 320rpx;
				}

				.eye-right {
					top: 320rpx;
					left: 410rpx;
				}
			}
		}

		.box {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 742rpx;
			z-index: 1;
			background-color: white;
			border-radius: 48rpx 48rpx 0 0;
			padding: 60rpx 60rpx 0 60rpx;

			.title {
				position: relative;
				width: 100%;
				height: 89rpx;
				font-size: 48rpx;
				font-weight: 600;
				line-height: 56rpx;
				vertical-align: top;

				.bottom-line {
					position: absolute;
					left: 0;
					bottom: 0;
					width: 72rpx;
					height: 8rpx;
					border-radius: 4rpx;
					background: rgba(91, 84, 228, 1);
				}
			}

			.form {
				padding: 72rpx 0 24rpx 0;

				input {
					height: 97rpx;
					background: rgba(245, 248, 255, 1);
					border-radius: 12rpx;
					padding: 0 32rpx;
					margin-bottom: 24rpx;
				}

				button {
					height: 110rpx;
					text-align: center;
					background: rgba(91, 84, 228, 1);
					color: white;
					font-size: 32rpx;
					letter-spacing: 2px;
					line-height: 110rpx;
				}
			}

			.term {
				display: flex;
				justify-content: center;
				align-items: center;

				checkbox {
					transform: scale(0.5)
				}

				.text {
					font-size: 24rpx;

					text {
						color: rgba(53, 98, 254, 1);
					}
				}
			}
		}
	}
</style>